<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: blue;
            overflow: hidden;
        }

        div ul {
            padding: 0;
            margin: 50px auto;
            list-style: none;
            width: 200px;
            height: 200px;
            background-color: green;
            overflow: hidden;
        }

        div ul li {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px auto;
        }
    </style>
</head>

<body>

    <!-- 嵌套关系的标签 -->
    <div>
        <ul>
            <li></li>
        </ul>
    </div>


    <script>
        // 要求：
            // li标签的点击事件触发，不会触发ul和div标签的点击事件
        // 分工：
            // 点击div， 输出 “取快递”
            // 点击ul，  输出 “送外卖”
            // 点击li，  输出 “看电影”

        // 事件对象提供阻止事件冒泡的方法：
            // event.stopPropagation()


        // 获取相关的元素
        var div = document.querySelector("div");
        var ul = document.querySelector("ul");
        var li = document.querySelector("li");

        // 事件监听
        div.addEventListener("click", function () {
            console.log("取快递")
        }, false)

        ul.addEventListener("click", function () {
            console.log("送外卖")
        }, false)


        li.addEventListener("click", function (event) {
            //阻止事件冒泡
            event.stopPropagation();
            console.log("看电影")
        }, false)






    </script>
</body>

</html>